define([
  'utils/Conf',
  'models/Model',
  'collections/Collection',
  'views/View',
  'views/List',
  'views/Item',
  'views/media/MediaView',
  'views/media/MediaViewer',
  'views/media/ModalMediaViewer',
//  'views/media/ImagePreview',
//  'views/media/VideoPreview',
  'hbs!template/users/internet/internet',
  'hbs!template/media/media-list',
  'hbs!template/media/thumbnail-media-view',
/*  'hbs!template/users/internet/image-list',
  'hbs!template/users/internet/image-item',
  'hbs!template/users/internet/video-item',
*/
  'bootstrap_buttons'
], function(Conf, Model, Collection, View, List, Item, MediaView, /*ImagePreview, VideoPreview*/MediaViewer, ModalMediaViewer, template, media_list/*list_template, image_item_template, video_item_template*/, thumbnail_template){
  
  var Results = Collection.extend({
    url: Conf.routes.users.internet,

//    model: Result,
    
    initialize: function(models, options) {
      options || (options = {});
      
      // Images flag
      var images = true;
      this.setImages = function(flag) {
        images = flag;
      };
      this.getImages = function() {
        return images;
      };

      // QueryString
      var q = "";
      this.setQueryString = function(query) {
        q = query;
      };
      this.getQueryString = function() {
        return q;
      };

      Collection.prototype.initialize.call(this, models, options);
    },
    
    fetch: function(options) {
      options || (options = {});

      var data = options.data || {};
      console.log(this.getImages());
      data.type = this.getImages() ? "IMAGES" : "VIDEOS";
      data.q = this.getQueryString();
      
      options.data = data;
      Collection.prototype.fetch.call(this, options);
    },
    
  });
  
/*  var ItemImagePreview = ImagePreview.extend({
    template: image_item_template,
    flags: {
      check: false,
      progress: false,
      modal: true
    }
  });

  var ItemVideoPreview = VideoPreview.extend({
    template: video_item_template,
    flags: {
      modal: true
    },

    getRenderData: function() {
      var data = VideoPreview.prototype.getRenderData.call(this);
      console.log("------------------------------");
      console.log(data);
      console.log("------------------------------");
      return data;
    }
    
  });
*/
  var ThumbnailImageView = MediaView._views.image.extend({
    template: thumbnail_template
  });

  var ThumbnailVideoView = MediaView._views.video.extend({
    template: thumbnail_template
  });

  var ResultMediaViewer = MediaViewer.extend({
    views: {
      image: ThumbnailImageView,
      video: ThumbnailVideoView
    },
    
    flags: {
      share: false,
      check: false,
      modal: true
    },

    openModal: function() {
      var data = this.data;
      data.source = "http://www.youtube.com/v/" + this.data.id + "?version=3&enablejsapi=1&playerapiid=player1&autoplay=1";
      var viewer = new MediaViewer({data: this.data});
      viewer.flags.share = true;
      var modal = new ModalMediaViewer({viewer: viewer});
      MediaViewer.prototype.openModal.call(this, modal);
    }

/*    renderMedia: function() {
      // Get the media HTML element where the media view will be put.
      var $media = this.$("div[name=media-viewer]"),
          mediaView;
      
      // Create the correct media view for this data.
      //if(this.data.type === 'PHOTO') {
        mediaView = new this.views.image({data: this.data});
      //} 
      $media.html(mediaView.render().el);

      // Function to do some extra work. Sometimes useful using flash.
      mediaView.prepare();
    }
    */
  });
  
  var MediaList = List.extend({
    template: media_list,
    itemView: ResultMediaViewer

    
  });
  
/*  var PhotoList = List.extend({
    template: list_template,
    itemView: ItemImagePreview
  });

  var VideoList = List.extend({
    template: list_template,
    itemView: ItemVideoPreview
  });
*/
  var InternetView = View.extend({
    template: template,

    events: {
      "click a[name=search]":         "search",
      "click a[name=images]":         "selectImages",
      "click a[name=videos]":         "selectVideos"
    },
    
    initialize: function(options) {
      options || (options = {});
      View.prototype.initialize.call(this, options);

      this.images = true; // By default the option is images

      // Init the search data
      this.results = new Results([], {images: this.images, q: this.q});
      this.results.pagination.setLimit(6); // 8 is the max because it is limited by the api used in the server part
      //this.results.bind("reset", this.render, this);
      // ResultsView
      
    },

    render: function() {
      View.prototype.render.call(this);
      
      return this;
    },

    renderResults: function() {
      var mediaView = new MediaList({el: "#internet-results", collection: this.results});
/*      if(this.images) {
        var photosView = new PhotoList({el: "#internet-results", collection: this.results});
        photosView.render();
        //this.$("#internet-results", this.el).html(this.photosView.render().el);  
      } else {
        var videosView = new VideoList({el: "#internet-results", collection: this.results});
        videosView.render();
        //this.$("#internet-results", this.el).html(this.videosView.render().el);  
      }*/
      mediaView.render();
    },
    
    selectImages: function() {
      this.images = true;
      this.search();
    },

    selectVideos: function() {
      this.images = false;
      this.search();
    },

    search: function() {
      //this.results.reset();
      this.q = this.$("#search_q", this.el).val();
      if(this.q) {
        console.log("Buscando q: " + this.q + " del tipo images: " + this.images);
        
        this.results.setImages(this.images);
        this.results.setQueryString(this.q);
        this.results.pagination.setPage(1, true);
        this.results.fetch();
        this.render();
        this.renderResults();
      } else {
        this.render();
      }
    },

    getRenderData: function() {
      var data = View.prototype.getRenderData.call(this);
      data._images = this.images;
      data._q = this.q;
      return data;
    }
  });

  return InternetView;
});